<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <!-- 
        css3弹性盒模型 flex flexbox 伸缩布局盒模型
    添加在伸缩容器里的（父元素）
            给伸缩容器 添加display:flex;
                float clear (vercital-align)无效
                注意：display:flex不能继承，只能添加在父元素上
            
            flex-direction:伸缩流的方向：默认row 从左往右（水平）  row-reverse 从右往左   column 从上往下（垂直）  column-reverse 从下往上 
            flex-wrap:伸缩换行  默认值nowrap 不换行 wrap 换行（用的最多）（子元素的宽度高度相加大于父元素的宽度高度，wrap才会生效，如果没有超父元素的宽度，wrap就无效）
                wrap-reverse 换行反向
                    主轴是水平时，上下反向
                    主轴是垂直时，左右反向

            flex-flow是flex-direction和 flex-wrap的简写，只有一个flex-direction或者只有flex-wrap都可以进行简写，两个一起也可以简写，只不过要加空格隔开


            justify-content:主轴的对齐方式(水平的对齐) flex-start 起点 flex-end 终点 center 中间
                space-around 把剩余空间进行平均分（中间的间距是两边的2倍），两边留白 
                space-between 把剩余空间进行平均分,两边不留白
                space-evenly  把剩余空间进行完全平均分（所有间距一样）

            align-items:侧轴的对齐(单行的垂直对齐)  flex-start 起点 flex-end 终点 center 中间 
        

 添加在伸缩项目（子元素）
        align-self：单个的垂直对齐  flex-start 起点 flex-end 终点 center 中间 
     -->
     <style>
         .all{
             width: 100%; height:260px;
             background:#ccc; 
             display: flex;
             justify-content: space-between;
             padding: 0 10px;
             box-sizing: border-box;
             /* align-items: center;
         */
         }
         .all div{
           width:20%;  
           height:130px;
           font-size: 40px;
  
        
         }
         .all>div:nth-child(1){
             background-color: red;
             align-self: flex-start;
          
         }
         .all>div:nth-child(2){
             background-color: green;
             /* font-size:16px; */
             align-self: center;
         }
         .all>div:nth-child(3){
             background-color: blue;
             /* height:200px;
             font-size:30px; */
             align-self: flex-end;
         }
     </style>
</head>
<body>
    <div class="all">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>